<template>
    <div
        :class="{
            'vux-flex-col': orient === 'vertical',
            'vux-flex-row': orient === 'horizontal',
        }"
        :style="styles"
        class="vux-flexbox"
    >
        <slot />
    </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue';
export default defineComponent({
    props: {
        gutter: {
            type: Number,
            default: 8
        },
        orient: {
            type: String,
            default: 'horizontal'
        },
        justify: String,
        align: String,
        wrap: String,
        direction: String
    },
    setup(props) {
        const styles = computed(() => {
            const { justify, align, wrap, direction } = props;
            const styles = {
                'justify-content': justify,
                '-webkit-justify-content': justify,
                'align-items': align,
                '-webkit-align-items': align,
                'flex-wrap': wrap,
                '-webkit-flex-wrap': wrap,
                'flex-direction': direction,
                '-webkit-flex-direction': direction
            };
            return styles;
        });
        return {
            styles
        };
    }
});
</script>

<style  lang="less">
.vux-flexbox {
    // width: 100%;
    text-align: left;
    display: flex;
    display: -webkit-flex;
    box-align: center;
    align-items: center;
    .vux-flexbox-item {
        flex: 1;
        -webkit-flex: 1;
        min-width: 20px;
        width: 0%;
        &:first-child {
            margin-left: 0 !important;
            margin-top: 0 !important;
        }
    }
}

.vux-flex-row {
    box-direction: row;
    box-orient: horizontal;
    flex-direction: row;
}

.vux-flex-col {
    box-orient: vertical;
    flex-direction: column;
    > .vux-flexbox-item {
        width: 100%;
    }
}
</style>
